<template>
	<div class="mine">
		<!-- 顶部 -->
		<van-nav-bar title="个人中心" left-text="返回" left-arrow @click-left="ret()" @click-right="set()">
		  <template #right>
		    <van-icon name="setting-o" size="20" />
		  </template>
		</van-nav-bar>
		<!-- 个人中心界面 -->
		<!-- 用户信息板块 -->
		<div class="user">
			欢迎您!{{mine.detail.username}}
		</div>
		<div>
			<!-- <van-list
			  v-model="loading"
			  :finished="finished"
			  finished-text="没有更多了"
			  @load="onLoad"
			>
			  <van-cell v-for="item in list" :key="item" :title="item" />
			</van-list> -->
		</div>
		<!-- <van-cell title="显示分享面板" @click="work()">
			<template #right>
			  <van-icon name="setting-o" size="20" />
			</template>
		</van-cell> -->
		<div class="works" @click="work()">
			<span class="p">个人作品</span>
			<span class="san"><van-icon name="arrow" size="20"/></span>
		</div>
		<div class="attention" @click="att()">
			<span class="p">我的关注</span>
			<span class="san"><van-icon name="arrow" size="20"/></span>
		</div>
		<!-- 底部 -->
		<van-tabbar v-model="active">
		  <van-tabbar-item icon="home-o"><router-link class="tab-item" to="/First">首页</router-link></van-tabbar-item>
		  <van-tabbar-item icon="friends-o" @click="Community()">社区</van-tabbar-item>
		  <van-tabbar-item icon="user-o"><router-link class="tab-item" to="/Mine">个人中心</router-link></van-tabbar-item>
		</van-tabbar>
	</div>
</template>

<script>
	export default{
		name:'mine',
		data() {
		    return {
		      active:0,
			  list: [],
			  loading: false,
			  finished: false,
			  mine:'',
		    };
		},
		created(){
			//将Sring数据还原成json对象
			this.mine=JSON.parse(localStorage.getItem('data-mine'));
			console.log(this.mine.detail.username);				//本行目的为验证数据，可省略
		},
		methods:{
			ret(){
				this.$router.push({path:'Community'})
			},
			set(){
				this.$router.push({path:'Subimg'})
			},
			Community(){
				this.$router.push({path:'Community'})
			},
			work(){
				this.$router.push({path:'Myworks'})
			},
			att(){
				this.$router.push({path:'Attention'})
			}
			// onLoad() {
			//     // 异步更新数据
			//     // setTimeout 仅做示例，真实场景中一般为 ajax 请求
			//     setTimeout(()=>{
			// 		for(let i=0;i<10;i++){
			// 			this.list.push(this.list.length+1);
			// 		}
					
			// 		//加载状态结束
			// 		this.loding=false;
					
			// 		//数据全部加载完成
			// 		if(this.list.length>=40){
			// 			this.finished=true;
			// 		}
			// 	},1000);
			// },
		}
	}
</script>

<style scoped>
	.mine{
		height: 600px;
		background-color: #FAFAFA;
		margin: 0 10px;
		background: url('~@/assets/mine4.png');
		position: relative;
		background-color: #FAFAFA;
		height: 600px;
	}
	.user{
		/* background-color:lemonchiffon; */
		width:280px;
		height: 150px;
		/* border: 1px solid black; */
		position: relative;
		top: 40px;
		left: 22px;
		padding-top: 30px;
		font-weight: bold;
		font-size: 20px;
	}
	.works{
		position: absolute;
		left: 10px;
		border:1px solid black;
		border-radius: 5px;
		border-color: lightgrey;
		width: 300px;
		height: 35px;
		background-color: white;
		padding-top: 10px;
	}
	.attention{
		position: absolute;
		top:280px;
		left: 10px;
		border:1px solid black;
		border-radius: 5px;
		border-color: lightgrey;
		width: 300px;
		height: 35px;
		background-color: white;
		padding-top: 10px;
	}
	.p{
		font-size: 18px;
	}
	.san{
		margin-top: 5px;
		padding-top: 10px;
		margin-left: 178px;
	}
</style>
